<template>
  <div class="mg-t-30">
    <checked-title>
      <template #title>
        {{ title }}
        <span
          @click="sortChange"
          class="title_span"
          style="color: white"
        >
          <template v-if="sortActive == 'desc'">
            <img
              src="../../../assets/images/dust/sort-2.png"
              style="position: relative; display: inline-block; z-index: 10; width: 20px; height: 15px;"
            />
          </template>
          <template v-else>
            <img
              alt
              src="../../../assets/images/dust/sort-1.png"
              style="position: relative; display: inline-block; z-index: 10; width: 20px; height: 15px"
            />
          </template>
        </span>
      </template>
      <template #right>
        <div
          :class="active == item.value ? 'active' : ''"
          :key="index"
          @click="tabChange(item.value)"
          class="title2 pointer"
          v-for="(item, index) in tabList"
        >{{ item.title }}</div>
      </template>
    </checked-title>
    <div>
      <div
        id="yangcheng-dianweipaiming"
        ref="yangchengchart"
        style="height: 400px"
      ></div>
    </div>
    <!-- <div class="posab"> -->
    <el-popover
      class="posab"
      placement="bottom"
      trigger="hover"
      width="350"
    >
      <div>
        <p>
          <b>数 &nbsp;&nbsp;&nbsp; 值：</b>当前监测点位今日截止目前监测值均值。
        </p>
        <p>
          <b>报警次数:</b>
          当前监测点位今日截止目前报警总次数，维度包含PM2.5、PM10、噪声、TSP（总悬浮颗粒物）、臭氧。
        </p>
        <br />
        <p>
          <b>监测临界点</b>
        </p>
        <p>噪&nbsp;&nbsp; 声： 70dB</p>
        <p>PM2.5： 150μg/m³</p>
        <p>PM 10： 200μg/m³</p>
        <p>T&nbsp;S&nbsp; P： 300μg/m³</p>
        <p>臭&nbsp;&nbsp;&nbsp;氧： 160μg/m³"</p>
      </div>
      <el-button
        class="btns"
        slot="reference"
      >
        <i class="el-icon-warning-outline"></i>
      </el-button>
    </el-popover>
  </div>
  <!-- </div> -->
</template>

<script>
import { YangChenJianCeDB } from '@/api'

let chartDianWeiPaiMing = null

export default {
  data() {
    return {
      title: '今日点位空气质量排名',

      active: 'a34004',
      tabList: [
        { title: 'PM2.5', value: 'a34004' },
        { title: 'PM10', value: 'a34002' },
        { title: '噪声', value: 'n00001' },
        { title: 'TSP', value: 'a34001' }
        // { title: '臭氧', value: 'a05024' },
      ],

      sortActive: 'desc', // asc
      quantity: [],
      numberTimes: [],
      categories: []
    }
  },
  mounted() {
    this.rankingList()
  },
  beforeDestroy() {
    this.desHander()
  },
  methods: {
    // 图表初始化
    initChart() {
      chartDianWeiPaiMing = echarts.init(document.getElementById('yangcheng-dianweipaiming'))
      var option = {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          top: '10%',
          containLabel: true
        },
        legend: {
          top: '3%',
          right: '20',
          itemWidth: 12,
          itemHeight: 12,
          data: [
            {
              icon: 'image://',
              name: '数值'
            },
            {
              icon: 'image://',
              name: '报警次数'
            }
          ],
          textStyle: {
            fonstSize: 12,
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(31, 73, 135, 0.7)',
          formatter: params => {
            let str =
              '数值：' +
              params[0].data +
              `${this.active == 'n00001' ? 'dB' : 'μg/m³'}<br/>报警次数：` +
              params[2].data +
              '次'
            return str
          }
        },
        xAxis: [
          { show: false },
          {
            type: 'value',
            name: '报警次数',
            position: 'right',
            alignTicks: true,
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'red'
              }
            },
            splitLine:{
              show: false
            },
            axisLabel: {
              formatter: '{value} ml'
            }
          }
        ],
        yAxis: [
          {
            name: '数值',
            type: 'category',
            // 刻度线
            axisTick: {
              show: false
            },
            // 坐标线
            axisLine: {
              show: false,
              lineStyle: {
                color: '#9ED5FF'
              }
            },
            data: this.categories,
            axisLabel: {
              // rotate: 50,
              margin: 15,
              formatter: function (value) {
                let ret = ''
                let max = 10
                let val = value.length
                let rowN = Math.ceil(val / max)
                if (rowN > 1) {
                  for (let i = 0; i < rowN; i++) {
                    let temp = ''
                    let start = i * max
                    let end = start + max
                    temp = value.substring(start, end) + '\n'
                    ret += temp
                  }

                  if (ret.length > 12) {
                    ret = ret.substring(0, 10) + '...'
                  }

                  return ret
                } else {
                  return value
                }
              }
            }
          }
        ],
        series: [
          {
            name: '数值',
            type: 'bar',
            zlevel: 3,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(43, 136, 250, 0.1)'
            },
            barWidth: 15,
            itemStyle: {
              color: function (params) {
                let colorList = [
                  ['#42D9FF', '#18253B'],
                  ['#7CFF95', '#18253C'],
                  ['#4EA6FF', '#18253C'],
                  ['#FF6594', '#19253B'],
                  ['#4297FF', '#18253C']
                ]
                let index = params.dataIndex
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - colorList.length
                }
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: colorList[index][0]
                  },
                  {
                    offset: 1,
                    color: colorList[index][1]
                  }
                ])
              }
            },
            data: this.quantity
            // data: this.rankData.yData
          },
          {
            z: 1,
            type: 'pictorialBar',
            symbolPosition: 'end',
            symbolRotate: '180',
            symbolSize: [20, 15],
            itemStyle: {
              color: function (params) {
                let colorList = [['#42D9FF'], ['#7CFF95'], ['#4EA6FF'], ['#FF6594'], ['#4297FF']]
                let index = params.dataIndex
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex - colorList.length
                }
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: colorList[index]
                  },
                  {
                    offset: 1,
                    color: colorList[index]
                  }
                ])
              }
            },
            data: this.quantity,
            symbol: 'triangle',
            symbolOffset: ['52%', '0']
            // data: this.rankData.yData
          },
          {
            name: '报警次数',
            type: 'line',
            xAxisIndex: 1,
            zlevel: 3,
            symbolSize: 8,
            symbol: 'circle',
            itemStyle: {
              color: '#F3C02B',
              borderColor: '#fff',
              borderWidth: 2
            },
            lineStyle: {
              color: '#F3C02B',
              shadowColor: '#C0920B',
              shadowBlur: 10
            },
            data: this.numberTimes
            // data: this.rankData.yData1
          }
        ]
      }

      chartDianWeiPaiMing.setOption(option)
    },
    // 更新
    tabChange(active) {
      this.active = active
      this.categories = []
      this.quantity = []
      this.numberTimes = []
      this.rankingList('tabChange')
    },

    sortChange() {
      this.sortActive = this.sortActive == 'desc' ? 'asc' : 'desc'
      this.categories = []
      this.quantity = []
      this.numberTimes = []
      this.rankingList('tabChange')
    },

    // 点位排名
    rankingList(type) {
      const data = {
        signalCode: this.active,
        sort: this.sortActive == 'asc' ? 2 : 1
      }
      YangChenJianCeDB.DianweiPaimingTongJi(data).then(res => {
        // 正序倒序
        // const sortArr = res.data.sort((a, b) => {
        //   const isSort = this.sortActive === 'asc'
        //   return isSort ? a.bjNum - b.bjNum : b.bjNum - a.bjNum
        // })
        res.data.forEach(item => {
          this.categories.unshift(item.site_name)
          let a = ''
          if (this.active == 'n00001') {
            a = item.value.indexOf('d')
          } else {
            a = item.value.indexOf('μ')
          }
          let b = item.value.substring(0, a)
          this.quantity.unshift(Number(b))
          this.numberTimes.unshift(Number(item.bjNum))
        })
        if (type == 'tabChange') {
          var chart = echarts.getInstanceByDom(document.getElementById('yangcheng-dianweipaiming'))
          var option = chart.getOption()
          option.series[0].data = this.quantity
          option.series[1].data = this.quantity
          option.series[2].data = this.numberTimes
          chart.setOption(option)
          this.initChart()
        } else {
          this.initChart()
        }
      })
    },

    // 销毁实例
    desHander() {
      let myChart = echarts.init(this.$refs.yangchengchart)
      myChart.dispose()
    }
  }
}
</script>
<style lang="less">
.title_span {
  display: inline-block;
  width: 22px;
  height: 15px;
  img {
    display: block;
    height: 15px;
  }
}
#yangcheng-dianweipaiming {
  position: relative;
}

.posab {
  position: absolute;
  right: 20px;
  bottom: 385px;
  z-index: 2000;
  width: 20px;
  height: 20px;
}
.btns {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: block;
  padding: 0;
  background-color: transparent;
  border: 0px;
}
.el-icon-warning-outline {
  color: #fff;
  width: 20px;
  height: 20px;
  font-size: 20px;
}
</style>
